<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环境监控系统 - 主界面</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            temperature: '#EF4444',
            humidity: '#3B82F6',
            light: '#F59E0B',
            device_on: '#10B981',
            device_off: '#9CA3AF',
            current: '#14B8A6',
            voltage: '#6366F1',
            power: '#F97316'
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .sensor-card {
        @apply bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg;
      }

      .sensor-value {
        @apply text-[clamp(1.8rem,4vw,2.5rem)] font-bold;
      }

      .device-indicator {
        @apply w-3 h-3 rounded-full inline-block mr-2;
      }

      .connection-status {
        @apply fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300;
      }

      /* 修改数据更新动画，移除黄色背景 */
      .data-update-animation {
        transition: all 0.3s ease;
        transform: scale(1.02); /* 仅保留轻微缩放效果 */
        /* 移除背景色，避免黄带效果 */
        border-radius: 4px;
      }
    }
  </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-thermometer-half text-primary text-xl"></i>
        <h1 class="text-lg font-bold text-primary">环境监控系统</h1>
      </div>
      <a href="/control"
        class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
        <i class="fa fa-sliders mr-2"></i> 控制中心
      </a>
    </div>
  </header>

  <!-- 连接状态指示器 -->
  <div id="connectionStatus" class="connection-status bg-red-500">
    <i class="fa fa-wifi mr-2"></i> <span>连接断开</span>
  </div>

  <main class="container mx-auto px-4 py-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <!-- 温度卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">温度</h2>
          <i class="fa fa-thermometer-three-quarters text-temperature text-xl"></i>
        </div>
        <div class="sensor-value temperature text-temperature" id="temperature">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="temp-status">--</span>
        </div>
      </div>

      <!-- 湿度卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">湿度</h2>
          <i class="fa fa-tint text-humidity text-xl"></i>
        </div>
        <div class="sensor-value humidity text-humidity" id="humidity">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="humidity-status">--</span>
        </div>
      </div>

      <!-- 光照卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">光照</h2>
          <i class="fa fa-sun text-light text-xl"></i>
        </div>
        <div class="sensor-value light text-light" id="light">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="light-sensor-status">--</span> <!-- 光照状态专用 ID -->
        </div>
      </div>

      <!-- 电流卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">电流</h2>
          <i class="fa fa-bolt text-current text-xl"></i>
        </div>
        <div class="sensor-value current text-current" id="current">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="current-status">--</span>
        </div>
      </div>

      <!-- 电压卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">电压</h2>
          <i class="fa fa-bolt text-voltage text-xl"></i>
        </div>
        <div class="sensor-value voltage text-voltage" id="voltage">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="voltage-status">--</span>
        </div>
      </div>

      <!-- 功率卡片 -->
      <div class="sensor-card">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-base font-semibold text-gray-700">功率</h2>
          <i class="fa fa-bolt text-power text-xl"></i>
        </div>
        <div class="sensor-value power text-power" id="power">--</div>
        <div class="mt-2 text-sm text-gray-500">
          <span id="power-status">--</span>
        </div>
      </div>
    </div>

    <!-- 设备状态 -->
    <div class="bg-white rounded-lg shadow-md p-4 mt-6">
      <h2 class="text-base font-semibold text-gray-700 mb-3">设备状态</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex items-center">
          <i class="fa fa-door-open text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">门状态</div>
            <div class="flex items-center" id="door-status">
              <span class="device-indicator bg-gray-300"></span>
              <span>--</span>
            </div>
          </div>
        </div>
        <div class="flex items-center">
          <i class="fa fa-window-maximize text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">窗状态</div>
            <div class="flex items-center" id="window-status">
              <span class="device-indicator bg-gray-300"></span>
              <span>--</span>
            </div>
          </div>
        </div>
        <div class="flex items-center">
          <i class="fa fa-lightbulb text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">灯光状态</div>
            <div class="flex items-center" id="device-light-status"> <!-- 设备灯状态专用 ID -->
              <span class="device-indicator bg-gray-300"></span>
              <span>--</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 刷新按钮 -->
    <button id="refreshButton"
      class="mt-6 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
      <i class="fa fa-refresh mr-2"></i> 刷新环境数据
    </button>

    <!-- 系统状态 -->
    <div class="bg-white rounded-lg shadow-md p-4 mt-6">
      <h2 class="text-base font-semibold text-gray-700 mb-3">系统状态</h2>
      <div class="grid grid-cols-2 gap-4">
        <div class="flex items-center">
          <i class="fa fa-server text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">服务器状态</div>
            <div class="font-medium" id="serverStatus">--</div>
          </div>
        </div>
        <div class="flex items-center">
          <i class="fa fa-wifi text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">实时连接</div>
            <div class="font-medium" id="realtimeStatus">断开</div>
          </div>
        </div>
        <div class="flex items-center">
          <i class="fa fa-clock-o text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">最后更新</div>
            <div class="font-medium" id="lastUpdate">--</div>
          </div>
        </div>
        <div class="flex items-center">
          <i class="fa fa-info-circle text-primary mr-2"></i>
          <div>
            <div class="text-sm text-gray-500">更新方式</div>
            <div class="font-medium">实时推送</div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="bg-white shadow-inner mt-6 py-4">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
      <p>© 2025 环境监控系统 | 嵌入式解决方案</p>
    </div>
  </footer>

  <script src="{{ url_for('static', filename='index.js') }}?v=1"></script>

</body>

</html>